<template>
	<view class="mine-buy">
		<!--顶部页面标题-->
		<view class="navbar">
			<navBar :title="'抢购订单'"></navBar>
		</view>
		<!-- 返回顶部按钮
		<u-back-top :scroll-top="scrollTop" top="10" :duration="240" :iconStyle="iconStyle" :customStyle="custom">
		</u-back-top>
		<!-- 导航栏 -->
		<u-sticky bgColor="#FFFFFF">
			<u-tabs :list="list_tabs" lineWidth="0" lineColor="#AD4440" :activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" :scrollable="false" :current="tabs"
				@click="changeTabs">
			</u-tabs>
		</u-sticky>
		<!-- 买单详情 -->
		<view class="order-content">
			<view class="out-item">
				<view class="head">
					<!-- <img class="picture1" src="../images/组 278.png" alt=""> -->
					<span class="bill_number">订单编号：A03179M8E0</span>
					<!-- <img class="picture2" src="../images/组 231.png" alt=""> -->
					<span class="jiaoyi">等待买家付款</span>
				</view>
				<view class="middle">
					<view class="left_item">
						<image class="img-item" src="../../../static/images/home/shoe.png"></image>
					</view>
					<view class="right_item">
						<span class="head-title">百搭帆布鞋</span>
						<span class="now">交易时间：<span class="duili">2022-11-04 12：00</span></span>
						<span class="order_time">转售时间：<span class="time">2022-11-04 12：00</span></span>
						<span class="order_billtime">卖家电话：<span>15428756426</span></span>
						<span class="number">￥<text>1000.00</text></span>
					</view>
				</view>
			</view>
			<!-- 已完成 -->
			<view class="out-item">
				<view class="head">
					<!-- <img class="picture1" src="../images/组 278.png" alt=""> -->
					<span class="bill_number">订单编号：A03179M8E0</span>
					<!-- <img class="picture2" src="../images/组 231.png" alt=""> -->
					<span class="jiaoyi">已完成</span>
				</view>
				<view class="middle">
					<view class="left_item">
						<image class="img-item" src="../../../static/images/home/shoe.png"></image>
					</view>
					<view class="right_item">
						<span class="head-title">百搭帆布鞋</span>
						<span class="now">交易时间：<span class="duili">2022-11-04 12：00</span></span>
						<span class="order_time">转售时间：<span class="time">2022-11-04 12：00</span></span>
						<span class="order_billtime">卖家电话：<span>15428756426</span></span>
						<span class="number">￥<text>1000.00</text></span>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<view class="text-tips" :selectable="false">{{ maskTips }}</view>
						<view class="button-box">
							<view class="button-one" @click="cancelModal">取消</view>
							<view class="button-two" @click="confirm">确定</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import navBar from "@/components/NavBar.vue" // 导入顶部导航
	import {
		buyOrderList,
		cancelOrder,
		resell,
		handlesend,
	} from '@/common/api.js';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				/* 返回顶部按钮 */
				scrollTop: 0, // 返回顶部滚动值
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: '600',
					color: '#FFFFFF'
				}, // 滚动内层样式
				custom: {
					background: '#CB8F58'
				}, // 滚动外层样式

				/* tabs切换标签 */
				list_tabs: [{
					name: '全部',
				},{
					name: '销售中'
				}, {
					name: '已完成'
				}/* , {
					name: '转售'
				}, {
					name: '申请提货'
				}, {
					name: '已发货'
				} */], // 顶部标题
				activeStyle: {
					color: '#AD4440',
					fontSize: '14px',
					// fontWeight: 'bold',
					fontFamily: 'PingFang_Bold',
					transform: 'scale(1.05)',
					border:'1px solid #F71D1F',
					borderRadius:'50px 50px 50px 50px'
				}, // 顶部标题激活样式
				inactiveStyle: {
					color: '#606266',
					fontFamily: 'PingFang_Bold',
					fontSize: '14px',
					transform: 'scale(1)'
				}, // 顶部标题未激活样式
				itemStyle: {
					margin: '10rpx 0 0 0',
					padding: '0 20rpx 10rpx 20rpx',
					height: '64rpx',
				}, // 顶部标题样式
				tabs: 0, // 选择栏标识

				/* 加载更多 */
				loading: {
					status: 'loadmore', // 加载更多设置
					loadingText: '加载中',
					loadmoreText: '轻轻上拉加载更多',
					nomoreText: '暂时没有了',
				}, // 加载设置

				/* 订单数据 */
				isNotNull: false, // 订单不为空
				pages: 1, // 订单页数
				total_page: '', // 订单总页数
				amount: 5, // 订单条数
				total_amount: '', // 订单总数
				times: 2, // 数据条数
				status: 0, // 订单类型
				list: [], // 订单详情列表
				resell_ID: '', // 转售订单编号

				/* 订单提示信息 */
				tips: '请尽快完成支付哦~', // 订单支付提醒
				tips_one: '订单已付款，请等待卖家确认', // 订单已付款
				tips_two: '订单已取消', // 订单取消提示
				tips_three: '商品卖家已确认收货', // 订单完成提示
				tips_four: '商品已转售', // 订单转售成功提示
				tips_five: '已申请发货，请耐心等候~', // 商品请求发货中
				tips_six: '包裹已打包发货~', // 商品已发货

				/* 弹窗 */
				maskTips: '', // 弹窗提示
				showTips: false, // 弹窗状态
				isSuccess: false, // 禁止点击
			};
		},
		onLoad(option) {
			/* 是否从其他页面跳转 */
			if (JSON.stringify(option) == "{}") {
				this.tabs = 0;
			} else {
				this.tabs = parseInt(option.id);
				this.status = parseInt(option.id);
			};
		},
		onShow() {
			/* 获取订单数据 */
			this.getOrder(); // 获取订单数据信息
			this.loading.status = 'loadmore';
		},
		/* 返回顶部 */
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		/* 加载更多 */
		onReachBottom() {
			this.lower();
		},
		methods: {

			/* 获取买单信息 */
			getOrder() {
				const that = this;
				that.pages = 1; // 统一第一页
				const params = {
					page: that.pages,
					limit: that.amount,
					status: that.status,
					type: 1
				};
				buyOrderList(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.total_page = result.last_page;
						that.total_amount = result.total;
						that.list = result.data.map(item => {
							return {
								id: item.id,
								date: item.createTime,
								imgUrl: item.goodsLogo,
								title: item.goodsName,
								price: Fn.checkDigit({
									number: item.price,
									len: 4,
									max: 100000000,
									min: -1
								}) /* item.price */ , // 商品单价
								number: item.num,
								total_number: item.num,
								total_price: /* Fn.checkDigit({ number: item.sumPrice, len: 4, max: 100000000, min: -1 }) */ item
									.sumPrice, // 商品总价
								pay_price: /* Fn.checkDigit({ number: item.payMoney, len: 4, max: 100000000, min: -1 }) */ item
									.payMoney, // 实际支付金额
								status: item.status,
								order: item.orderSn,
								mobile: item.userPhone,
								final: item.is_final,
								orderTwo: item.courier_number,
								type: item.goodsType,
								money: /* Fn.checkDigit({ number: item.collection_money, len: 4, max: 100000000, min: -1 }) */ item
									.collection_money,
								sellType: item.zs_sta,
								resale: item.resale_time
							};
						});
						console.log(that.list);
						if (that.list.length === 0) {
							that.loading.status = 'nomore';
							that.isNotNull = true;
						} else {
							that.isNotNull = false;
						};
						if (that.list.length == that.total_amount) {
							that.loading.status = 'nomore';
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 加载下一页数据 */
			getMoreDetail() {
				const that = this;
				const params = {
					page: that.pages,
					limit: that.amount,
					status: that.status,
					type: 1
				};
				buyOrderList(params).then((res) => {
					const result = res.data;
					that.total_page = result.last_page;
					let moreList = result.data.map(item => {
						return {
							id: item.id,
							date: item.createTime,
							imgUrl: item.goodsLogo,
							title: item.goodsName,
							price: Fn.checkDigit({
								number: item.price,
								len: 4,
								max: 100000000,
								min: -1
							}) /* item.price */ , // 商品单价
							number: item.num,
							total_number: item.num,
							total_price: /* Fn.checkDigit({ number: item.sumPrice, len: 4, max: 100000000, min: -1 }) */ item
								.sumPrice, // 商品总价
							pay_price: /* Fn.checkDigit({ number: item.payMoney, len: 4, max: 100000000, min: -1 }) */ item
								.payMoney, // 实际支付金额
							status: item.status,
							order: item.orderSn,
							mobile: item.userPhone,
							final: item.is_final,
							orderTwo: item.courier_number,
							type: item.goodsType,
							money: /* Fn.checkDigit({ number: item.collection_money, len: 4, max: 100000000, min: -1 }) */ item
								.collection_money,
							sellType: item.zs_sta,
							resale: item.resale_time
						};
					});
					for (let i = 0; i < moreList.length; i++) {
						that.list.push(moreList[i]);
					};
					if (that.pages <= that.total_page) {
						that.loading.status = 'loadmore';
					} else {
						setTimeout(() => {
							that.loading.status = 'nomore';
						}, 700);
					};
				});
			},

			/* 取消订单 */
			cancel(id) {
				const that = this;
				const params = {
					ids: id
				};
				// 节流操作防止重复请求
				uni.$u.throttle(() => {
					cancelOrder(params).then((res) => {
						if (res.status === 1) {
							const result = res;
							// console.log(result);
							Fn.Toast(res.msg, 3, 700);
							that.getOrder();
						} else {
							Fn.Toast(res.msg, 3, 1500);
						}
					});
				}, 1500);
			},

			/* 提交增加防抖 */
			touchOffDebounce() {
				// 第一个参数为当前需要添加防抖的函数名 ***不需要加括号
				// 第二个为延时执行函数的时间
				// 第三个是否立即执行
				this.$debounce(this.confirmReSell, 1500, true);
			},

			/* 转售订单 */
			reSell(id) {
				this.resell_ID = id;
				this.showTips = true;
				this.isSuccess = true;
				// this.control = 1;
				this.maskTips = '转售需要消耗抢购分或绿色积分，请确保抢购分或绿色积分充足';
			},

			/* 确认转售订单 */
			confirmReSell() {
				const that = this;
				const params = {
					id: that.resell_ID
				};
				// uni.$u.throttle(() => {
				resell(params).then((res) => {
					if (res.status === 1) {
						Fn.Toast(res.msg, 3, 1000);
						setTimeout(() => {
							this.getOrder();
							that.isSuccess = false;
						}, 500);
					} else {
						that.isSuccess = false;
						Fn.Toast(res.msg, 3, 1500);
					};
				});
				// }, 1500);
			},

			/* 申请发货 */
			deliver(id) {
				const that = this;
				const params = {
					id: id
				};
				// 节流操作防止重复请求
				// uni.$u.throttle(() => {
				handlesend(params).then((res) => {
					if (res.status === 1) {
						Fn.Toast(res.msg, 3, 1500);
						setTimeout(() => {
							this.getOrder();
						}, 500);
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
				// }, 1500);
			},

			/* 切换标签 */
			changeTabs(item) {
				this.tabs = item.index;
				this.list = [];
				if (item.index === 0) {
					this.status = 0;
				} else if (item.index === 1) {
					this.status = 1;
				} else if (item.index === 2) {
					this.status = 2
				} else if (item.index === 3) {
					this.status = 3;
				};
				this.getOrder();
				this.loading.status = 'loadmore';
			},

			/* 向下滚动 */
			lower() {
				// console.log(e);
				const that = this;
				if (that.pages <= that.total_page && that.list.length != that.total_amount) {
					that.loading.status = 'loading';
					setTimeout(() => {
						that.pages = that.pages + 1;
						that.getMoreDetail();
					}, 700);
				} else {
					that.loading.status = 'nomore';
				};
			},

			/* 弹窗确认按钮 */
			confirm() {
				this.showTips = false;
				this.confirmReSell();
			},

			/* 弹窗取消按钮 */
			cancelModal() {
				this.showTips = false;
				this.isSuccess = false;
			},

			/* 跳转到支付页面 */
			navigateOrder(id) {
				uni.navigateTo({
					url: '/pages/index/action/order/order?id=' + id
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	uni-page-body {
		background: none;
	}

	.mine-buy {
		font-family: PingFang_Medium;
		background-color: #FFFFFF;
		.navbar {
			height:120rpx;
		
			.box_13 {
				width: 100%;
				height: 100rpx;
				padding: 0 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
		
				.text_2 {
					width: 60%;
					font-size: 38rpx;
					text-align: center;
					white-space: nowrap;
					overflow-wrap: break-word;
					font-weight: bold;
				}
		
				.button {
					width: 50rpx;
					height: 50rpx;
				}
		
				.occupy {
					width: 50rpx;
					height: auto;
				}
			}
		}
		.mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				// height: 390rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					// font-weight: 600;
					font-family: PingFang_Bold;
				}

				.inner-box {
					margin: 20rpx 55rpx 40rpx 55rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 33rpx;
						// font-family: Alibaba PuHuiTi;
						// font-weight: bold;
						font-family: PingFang_Bold;
						color: #89898C;
						word-wrap: break-word;
					}

					.button-box {
						text-align: center;
						margin-top: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 70rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 26rpx;
							// font-weight: bold;
							font-family: PingFang_Bold;
							// cursor: pointer;
						}

						.button-two {
							background-color: #000000;
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							// margin: 0 0 0 40rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 8rpx;
							font-size: 26rpx;
							// font-weight: bold;
							font-family: PingFang_Bold;
							// cursor: pointer;
						}
					}
				}
			}
		}

		.order-content {
			padding: 10rpx 18px;
			margin-top: 0px;
			.out-item{
				background: #25365A10;
				border-radius: 10px 10px 10px 10px;
				margin-top: 4%;
				.head{
					display: flex;
					justify-content: space-between;
					padding: 10px 10px;
					border-bottom:1px solid #25365A10;
					.picture1{
						width: 5%;
						color: red;
					}
					.picture2{
						width: 5%;
						margin-left: 2%;
					}
					.bill_number{
						font-size: 12px;
						margin-left: 2%;
						
					}
					.jiaoyi{
						font-size: 12px;
						color:#E24146;
						margin-left: 30%;
						font-weight: bold;
					}
				}
				.middle{
					padding:10px;
					display: flex;
					.left_item{
						width: auto;
						height: auto;
						.img-item{
							width: 120px;
							height:120px;
						}
					}
					.right_item{
						margin-left: 12px;
						display: block;
						.head-title{
							display: block;
							font-size: 14px;
							font-weight: bold;
							letter-spacing: 1px;
						}
						.now{
							color:#000000;
							opacity: 0.4;
							font-size: 12px;
							.duili{
								color:#000000;
								font-size: 12px;
								font-weight: normal;
							}
						}
						.order_time{
							display:block;
							font-size:12px;
							opacity: 0.4;
							.time{
								color:#000000;
								font-size: 12px;
								font-weight:normal;
							}
						}
						.order_billtime{
							font-size: 12px;
							color: #000000;
							font-weight: normal;
							opacity: 0.4;
						}
						.number{
							display: block;
							color:#F71D1F;
							font-size: 18px;
							font-weight: bolder;
							margin-top:5px;
							text-align: left;
						}
					}
				}
			}
		}
	}
</style>
